<template xmlns="">
  <el-container>
    <el-header><h1>首页商品属性管理</h1></el-header>
    <el-main>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="分类选择" name="tab_type_select">
<!--          <el-button type="info" style="width: 980px;margin-left: 20px">请在下方选择需要配置的分类</el-button>-->
          <div style="height: 360px;width: 900px;border: 1px solid red; border-radius: 20px;margin:0 auto" >
            <div  style="height: 300px;width: 850px;border: 1px solid gray; margin-top: 20px;margin-left: 20px">
              <el-cascader style="width: 500px;"
                v-model="value_type"
                :options="options_types"
                @change="handleChange">
              </el-cascader>
            </div>
          </div>

        </el-tab-pane>
        <el-tab-pane label="分类属性规格" name="tab_type_attr">

          <!--工具栏-->
          <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
            <el-form :inline="true" :model="filters" :size="size" ref="filters" class="form">
              <el-row>
<!--                <el-form-item>-->
<!--                  <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" @click="queryInfo" />-->
<!--                </el-form-item>-->
                <el-form-item>
                  <kt-button icon="fa fa-plus" :label="$t('action.add')" @click="handleAdd"/>
                </el-form-item>
              </el-row>
            </el-form>
          </div>

          <div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
            <el-form :inline="true" :size="size">
              <el-form-item>
                <el-button-group>
                  <el-tooltip content="列显示" placement="top">
                    <el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
                  </el-tooltip>
                </el-button-group>
              </el-form-item>
            </el-form>
            <!--表格显示列界面-->
            <table-column-filter-dialog
              ref="tableColumnFilterDialog"
              @handleFilterColumns="handleFilterColumns"
              :columns="columns">
            </table-column-filter-dialog>
          </div>
          <!--表格内容栏-->
          <cy-table
            :height="350"
            :data="pageResult"
            :columns="filterColumns"
            :showOperation="false"
            :showEditOperation="false"
            :showDeleteOperation="false"
            :showBatchDelete="false"
            @findPage="findPage"
            ref="CyTable"
          ></cy-table>

          <!--新增编辑界面-->
          <el-dialog
            :title="'新增'"
            width="25%"
            :visible.sync="editDialogVisible"
            :close-on-click-modal="false">
            <el-form
              :model="dataForm"
              label-width="80px"
              :rules="dataFormRules"
              ref="dataForm"
              :size="size">

              <el-form-item label="ID" prop="id" v-if="false">
                <el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="规格名称" prop="name">
                <el-input v-model="dataForm.name" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="规格编码" prop="code">
                <el-input v-model="dataForm.code" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item label="排序" prop="sortno">
<!--                <el-input v-model="dataForm.sortno" auto-complete="off"></el-input>-->
                <el-input-number v-model="dataForm.sortno"
                                 controls-position="right"
                                 :min="1" :max="10000"
                                 size="small" style="width: 240px" >
                </el-input-number>
              </el-form-item>

<!--              <el-form-item label="类型id" prop="type_id" >-->
<!--                <el-input v-model="dataForm.type_id" auto-complete="off"></el-input>-->
<!--              </el-form-item>-->
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align:center">
              <el-button :size="size" @click.native="editDialogVisible = false">{{$t('action.cancel')}}</el-button>
              <el-button
                :size="size"
                type="primary"
                @click.native="submitForm"
                :loading="editLoading"
              >{{$t('action.submit')}}</el-button>
            </div>
          </el-dialog>

        </el-tab-pane>
      </el-tabs>
    </el-main>
  </el-container>

</template>

<script>
  import PopupTreeInput from "@/components/PopupTreeInput";
  import CyTable from "@/views/Core/CyTable";
  import KtTable from "@/views/Core/KtTable";
  import KtButton from "@/views/Core/KtButton";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
  import { format } from "@/utils/datetime";
  import utils from "@/assets/js/utils.js";

  export default {
    name: "IndexProducPropertytShow",
    components: {
      CyTable,
      KtTable,
      KtButton,
      TableColumnFilterDialog
    },
    data() {
      return {
        size: "small",
        activeName: 'tab_type_select',
        value_type: '',
        options_types: [],
        editLoading: false,
        filters: {
          t: "productSpecs",
          type_id: ""
        },
        columns: [],
        filterColumns: [],
        pageRequest: { pageNum: 1, pageSize: 10 },
        pageResult: {},

        editDialogVisible: false, // 新增编辑界面是否显示
        dataFormRules: {
          name: [{ required: true, message: "请输入类型名称", trigger: "blur" }],
          code: [{ required: true, message: "请输入规格编码", trigger: "blur" }],
          sortno: [{ required: true, message: "请输入排序", trigger: "blur" }]
        },
        // 新增编辑界面数据
        dataForm: {
          t: "productSpecs",
          name: "",
          code: "",
          sortno: "",
          type_id: ""
        }
      };
    },
    methods: {
      findPage: function(data) {
        this.filters.t = "productSpecs";
        this.$refs.CyTable.findPage(this.filters);
      },

      // 显示查询
      queryInfo: function() {
        this.findPage(this.filters);
      },

      handleClick(tab, event) {
        console.log(tab, event);
      },

      handleChange(value_type) {
        var this_ =this;
        this_.activeName = 'tab_type_attr';
        var length =value_type.length;
        this_.type_id = value_type[length-1];
        (this_.filters = {
          t: "productSpecs",
          type_id: value_type[length-1]

        }),
          this_.findPage();
      },

      // 显示新增界面
      handleAdd: function() {
        this.editDialogVisible = true;
        this.operation = true;
        this.resetForm("dataForm");

      },

      // 重置表单
      resetForm(formName) {
        if (this.$refs[formName] != undefined) {
          this.$refs[formName].resetFields();
        }
      },

      // 编辑
      submitForm: function() {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            this.$confirm("确认保存吗？", "提示", {}).then(() => {
              let params = Object.assign({}, this.dataForm);
              var this_ = this;
              params.type_id = this_.type_id;
              this.utils.request.editInfo(params, function(res) {
                if (res.code == "0000") {
                  this_.$message({ message: "操作成功", type: "success" });
                  this_.editDialogVisible = false;
                  this_.$refs["dataForm"].resetFields();
                  this_.dataForm.type_id = this_.type_id;
                  // 获取分页数据
                  this_.$refs.CyTable.findPage(this_.filters);
                } else {
                  this_.$message({
                    message: "操作失败, " + res.msg,
                    type: "error"
                  });
                }
              });
            });
          }
        });
      },

      // 处理表格列过滤显示
      initColumns: function() {
        this.columns = [
          { prop: "id", label: "编号", minWidth: 50 },
          { prop: "name", label: "类型名称", minWidth: 100 },
          { prop: "code", label: "规格编码", minWidth: 80 },
          { prop: "type_id", label: "所属商品分类", minWidth: 100 }
        ];
        var temp = [];
        $.each(this.columns, function(key, val) {
          temp.push(val);
        });
        this.filterColumns = temp;
      },

      initProducTypes: function() {
        var this_ = this;
        this.utils.request.queryAllProductType({}, function(resp_data) {
          if (null != resp_data.data && resp_data.data.length > 0) {
            var array =[];
            //遍历第一层
            for (var i = 0; i < resp_data.data.length; i++) {
              var obj = {};
              obj.value = resp_data.data[i].id;
              obj.label = resp_data.data[i].text;
              if(null !=resp_data.data[i].nodes && resp_data.data[i].nodes.length > 0){
                var array2 = [];
                var data2 =resp_data.data[i].nodes;
                //遍历第二层
                for (var j = 0; j < data2.length; j++) {
                  var obj2 = {};
                  obj2.value = data2[j].id;
                  obj2.label = data2[j].text;
                  if(null !=data2[j].nodes && data2[j].nodes.length > 0) {
                    var array3 = [];
                    var data3 =data2[j].nodes;
                    //遍历第三层
                    for (var k = 0; k < data3.length; k++) {
                      var obj3 = {};
                      obj3.value = data3[k].id;
                      obj3.label = data3[k].text;
                      array3.push(obj3);
                    }
                    obj2.children =array3;
                  }
                  array2.push(obj2);
                }
                obj.children =array2;
              }
              array.push(obj);
            }
            this_.options_types =array;
          }
        });
      },

      // 处理表格列过滤显示
      displayFilterColumnsDialog: function () {
        this.$refs.tableColumnFilterDialog.setDialogVisible(true)
      },

      // 处理表格列过滤显示
      handleFilterColumns: function (data) {
        this.filterColumns = data.filterColumns
        this.$refs.tableColumnFilterDialog.setDialogVisible(false)
      }
    },
    mounted() {
      this.initProducTypes();
      this.initColumns();
    }


  }
</script>


<style scoped>
  /deep/ .el-input__inner   {
    width: 200px !important;
  }
</style>
